<!--  -->
<template>
<div class='test'>
  <div>{{$store.state.counter}}</div>
  <button @click = 'handleAdd'>加</button>
  <button @click = 'handleSub'>减</button>
  <button @click = 'handleAsync'>异步</button>
  <div>{{isOddOrEven}}</div>

</div>
</template>

<script>
import { mapGetters } from 'vuex'
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import store from './store.js'
import ProductList from './views/ProductList'
import Cart from './views/Cart'
export default {
// import引入的组件需要注入到对象中才能使用
  store,
  components: {
    ProductList,
    Cart
  },
  data () {
    // 这里存放数据
    return {

    }
  },
  computed: {
    ...mapGetters([
      'isOddOrEven'
    ])// 返回的是一个对象
  },
  methods: {
    handleAdd: function () {
      // this.$store.state.counter++
      this.$store.commit('add', 1)
      // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
      // Action 类似于 mutation，不同在于：
      // Action 提交的是 mutation，而不是直接变更状态。
      // Action 可以包含任意异步操作。
    },
    handleSub: function () {
      // this.$store.state.counter--
      this.$store.commit('sub', -1)
    },
    handleAsync: function () {
      // const _this = this
      // setTimeout(() => {
      //   _this.$store.state.counter++
      // }, 1000)
      this.$store.dispatch('asyncAdd', 2)
    }
  }
}
</script>
<style  scoped>

</style>
